<template>
  <div class="vant-table">
    <table cellspacing="0" :style="bgcolor" style="width:100%" class="table">
      <tr>
        <th class="th" v-for="(item, index) in option.column" :key="index">{{ item.label }}</th>
      </tr>
      <tr v-for="(item, index) in tableData" :key="index" class="list-tr">
        <td class="list-td" v-for="(context, i) in option.column" :key="i">{{ item[context.prop] }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    props:{
      bgcolor: Object,
      tableData:Array,
      option:Object
    },
    created() {}
  };
</script>

<style lang="scss" scoped>
  .vant-table {
    .table {
      border-bottom: 1px solid #eee;
      /*border-radius: .185185rem;*/
      .th {
        border-right: 1px solid #eee!important;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        /*background-color: #393943;*/
        text-align: center;
      }
      .list-tr {
        font-size: 13px;
        text-align: center;
        height: 30px;
        line-height: 30px;
      }
      .list-tr:nth-child(2n) {

        /*background-color: #33333b;*/
      }
      .list-td{
        border-top: 1px solid #eee;
        border-right: 1px solid #eee;
      }
    }
  }
</style>
